<template>
	<view class="normal-login-container">
		<view class="logo-content">
			<image style="width: 100px;height: 100px;border-radius: 50%;" :src="theme.logoUrl ? theme.logoUrl.url:'../../static/logo.png'" mode="widthFix">
			</image>
			<br />
			<br />
			<text class="title">{{theme.mobileLoginBackgroundName?theme.mobileLoginBackgroundName:'运油宝-管控'}}-注册</text>
		</view>
		<view class="login-form-content">
			<view class="input-item" style="display: flex;justify-content: center;align-items: center;">
				<view class="icon">
					<uni-icons type="person" size="19"></uni-icons>
				</view>
				<input v-model="register.phone" class="input" type="text" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view class="input-item"
				style="width: 60%;margin: 0px;display: flex;justify-content: center;align-items: center;">
				<view class="icon">
					<uni-icons type="checkbox" size="19"></uni-icons>
				</view>
				<input v-model="register.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
				<view style="height: 45px;float: right;">
					<view hover-class="buttonHover" @click="getPhonecode"
						style="height: 45px;position: absolute;margin-left: 10px;width: 104px;background-color: #f5f6f7;display: flex;justify-content: center;align-items: center;border-radius: 20px;">
						{{codeBtn.codeText}}
					</view>
				</view>
			</view>

			<view class="input-item" style="display: flex;justify-content: center;align-items: center;">
				<view class="icon">
					<uni-icons type="locked" size="19"></uni-icons>
				</view>
				<input v-model="register.password" type="password" class="input" placeholder="请设置密码" maxlength="20" />
			</view>
			<view class="input-item" style="display: flex;justify-content: center;align-items: center;">
				<view class="icon">
					<uni-icons type="locked" size="19"></uni-icons>
				</view>
				<input v-model="register.confirePwd" type="password" class="input" placeholder="请再次输入密码"
					maxlength="20" />
			</view>
			<view class="action-btn">
				<button @click="handleRegister" hover-class="btnHover" class="login-btn">确定注册</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		regSendSms,
		register
	} from '@/api/login'

	export default {
		data() {
			return {
				register: {
					phone: "",
					password: "",
					confirePwd: "",
					code: "",
					clientSecret:"12345678",
					clientId:"APP",
					deviceType: "APP"
				},
				//验证规则
				rules: {
					phone: {
						rule: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						msg: "请输入正确的手机号"
					},
					code: {
						rule: /^[0-9]{4}$/,
						msg: "请输入正确的验证码"
					}
				},
				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
				theme:JSON.parse(uni.getStorageSync('info') || '{}')
			}
		},
		methods: {
			//判断验证是否符合要求，合法性校验
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this.register[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'none'
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			//获取验证码按钮点击计时事件
			getPhonecode() {
				let that = this
				let queryParams = {
					phone: this.register.phone
				}
				if (this.validate('phone') && this.codeBtn.codeStatus) {
					regSendSms(queryParams).then(res => {
						//如果发送验证码成功
						if (res.data) {
							uni.showToast({
								title: '已发送至您的手机',
								icon: 'none'
							})
							this.codeBtn.codeStatus = false
							let timerId = setInterval(() => {
								let codetime = that.codeBtn.codeTime
								codetime--
								that.codeBtn.codeTime = codetime
								that.codeBtn.codeText = codetime + "s"
								if (codetime < 1) {
									clearInterval(timerId)
									that.codeBtn.codeText = "重新获取"
									that.codeBtn.codeTime = 60
									that.codeBtn.codeStatus = true
								}
							}, 1000)
						}
						else
						{
							uni.showToast({
								title: '验证码发送失败',
								icon: 'none'
							})
						}
					})
				}
			},
			// 注册方法
			async handleRegister() {
				if (!this.validate('phone')) return;
				if (!this.validate("code")) return;

				if (this.register.password === "") {
					uni.showToast({
						icon: 'none',
						title: '请设置您的密码'
					})
					return
				}
				if (this.register.confirePwd === "") {
					uni.showToast({
						icon: 'none',
						title: '请确认您的密码'
					})
					return
				}
				if (this.register.password !== this.register.confirePwd) {
					uni.showToast({
						icon: 'none',
						title: '密码输入不一致'
					})
					return
				} else {
					uni.showLoading({
						mask: true,
						title: '注册中...'
					})
					this.Register()
				}
			},
			// 注册
			async Register() {
				register(this.register).then(res => {
					uni.hideLoading()
					if (res.code == '200')
					{
						this.registerSuccess(res.data)
					}
					else
					{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 注册成功后，处理函数
			registerSuccess(result) {
				//成功后跳转注册成功页面
				uni.navigateTo({
					url: '/pages/login/registerSuccess?result='+result
				})
				
			}

		}
	}
</script>

<style lang="scss" scoped>
	.normal-login-container {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
				border-radius: 50px;
				background-color: #0081ff;
				color: white;
			}
		}
	}

	.btnHover {
		transform: translate(1px, 1px);
	}

	.buttonHover {
		opacity: 0.6;
	}
</style>